---
title: Dimensions
description: Learn about Dimensions in Unistyles 3.0
---

import { Aside } from '@astrojs/starlight/components'
import Seo from '../../../../components/Seo.astro'

<Seo
    seo={{
        title: 'Dimensions',
        description: 'Learn about Dimensions in Unistyles 3.0'
    }}
>


Unistyles provides rich metadata about your device dimensions. This is useful for creating responsive designs as well as avoiding installing third-party libraries.
Every property listed below can be accessed with [UnistylesRuntime](/v3/references/unistyles-runtime).
Dimensions are always up to date and are updated based on Unistyles' core logic, e.g., when the device orientation changes.

### Accessing dimensions

In order to start using the dimensions metadata, you need to import `UnistylesRuntime`:

```tsx /UnistylesRuntime/
import { UnistylesRuntime } from 'react-native-unistyles'
```

### Screen dimensions

The most basic dimensions are the screen dimensions. These are the dimensions of the screen that your app is running on.
You can access them with the `screen` prop:

```tsx /screen/
import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.screen.width // eg. 400
UnistylesRuntime.screen.height // eg. 760
```

### Status bar

You can access status bar dimensions with the `statusBar` prop:

```tsx /statusBar/
import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.statusBar.width // eg. 400
UnistylesRuntime.statusBar.height // eg. 24
```

This prop may be useful for creating custom headers. In most of the cases status bar height is equal to the top inset, but on some devices it may be different.

### Navigation bar

You can access navigation bar dimensions with `navigationBar` prop:

```tsx /navigationBar/
import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.navigationBar.width // eg. 400
UnistylesRuntime.navigationBar.height // eg. 24
```

This prop may be useful for creating custom bottom bars. In most of the cases navigation bar height is equal to the bottom inset, but on some devices it may be different.
### Insets

Insets are the safe areas of the screen. They are used to avoid overlapping with system UI elements such as the status bar, navigation bar, and home indicator.
You can access them with `insets` prop:

```tsx /insets/
import { UnistylesRuntime } from 'react-native-unistyles'

UnistylesRuntime.insets.top // eg. 42
UnistylesRuntime.insets.bottom // eg. 24
UnistylesRuntime.insets.left // eg. 0, or in vertical orientation can be top inset
UnistylesRuntime.insets.right // eg. 0
UnistylesRuntime.insets.ime // eg. 0
```

<Aside>
Read more about IME insets in keyboard [guide](/v3/guides/avoiding-keyboard/).
</Aside>

Insets can be used directly in your stylesheets to avoid passing values from `useSafeAreaInsets` hook from [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context?tab=readme-ov-file#usesafeareainsets) library.

<Aside>
Unistyles uses `WindowsInsetsCompat` API to handle insets on Android. This API requires your app to have edge to edge layout enabled.
Read more about it [here](/v3/references/edge-to-edge/).
</Aside>

Insets on Android respect following setups:

```tsx
<StatusBar />
<StatusBar hidden />
<StatusBar translucent /> // enabled by default
```

Unistyles automatically reacts when you hide or show status and navigation bars. Yo can do that with `UnistylesRuntime` [as well](/v3/references/unistyles-runtime/#setters).



### Pixel ratio

Device Pixel Ratio (DPR) is the ratio between physical pixels and device-independent pixels (DIPs) on a screen. It determines how many physical pixels are used to represent a single CSS pixel.

Most likely, your phone pixel ratio ranges between 1.0 to 3.0 (retina).

```tsx /pixelRatio/
UnistylesRuntime.pixelRatio // eg. 2.0
```

### Font scale

Font scale is a ratio between the font size of the device and the default font size. It is used to adjust the size of text on the screen in companion with [content size category](/v3/references/content-size-category/).

```tsx /fontScale/
UnistylesRuntime.fontScale // eg. 1.0
```

</Seo>
